<template>
    <div>
        <div class="message-list">
            <CellGroup>
                <Cell class="cell">
                    <Input/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content... 18/10/10"
                      to="/chat/message-list/message-detail">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
                <Cell class="cell" title="Display label content" label="label content">
                    <Badge :count="10" slot="extra"/>
                </Cell>
            </CellGroup>
        </div>
        <router-view></router-view>
    </div>
</template>

<script>
    import MessageDetail from "./MessageDetail"

    export default {
        name: "MessageList",
        components: {MessageDetail},
        methods: {
            open(link) {

            }
        }
    }
</script>

<style scoped>
    .message-list {
        position: absolute;
        top: 0;
        left: 55px;
        width: 235px;
        height: 640px;
        background-color: #e6e8eb;
        float: left;
        overflow-y: auto;
    }

    .cell {
        border-bottom: #cccccc solid 1px;
    }

</style>